<!-- 提货专区分类 -->
<template>
	<view class="container">
		<view class="navBar">
			<text class="yticon icon-zuo" @tap="back"></text>
			<view class="search">
				<icon class="searchIcon" type="search" :size='20' color='#999'></icon>
				<input class="searchInp" type="text" confirm-type="search" v-model="keyword" placeholder="请输入商品名称" @confirm="search" />
			</view>
		</view>
		<view class="category-list">
			<!-- 左侧分类导航 -->
			<scroll-view scroll-y="true" class="left">
				<view class="row" v-for="(category,index) in categoryList" :key="index" :class="[index==showCategoryIndex?'on':'',index+1==showCategoryIndex?'front':'',index-1==showCategoryIndex?'back':'']"
				 @tap="showCategory(index)">
					<view class="text clamp">
						{{category.cate_name}}
					</view>
				</view>
			</scroll-view>
			<!-- 右侧子导航 -->
			<scroll-view scroll-y="true" class="right" :class="[showCategoryIndex==0?'on':'']">
				<view class="category" v-for="(category,index) in categoryList" :key="index" v-show="index==showCategoryIndex">
					<!-- <view class="list" v-for="(secCategory,ind) in category.children" :key="ind">
						<view class="title">{{secCategory.cate_name}}</view> -->
					<view class="list">
						<view class="box">
							<view class="boxItem" v-for="(box,i) in category.children" :key="i" @tap="toCategory(box.id)">
								<image class="box-img" :src="box.pic"></image>
								<view class="text">{{box.cate_name}}</view>
							</view>
						</view>
					</view>
					<!-- </view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		getCategory
	} from "@/api/mall.js"
	export default {
		data() {
			return {
				cateId: 0,
				keyword: "",
				showCategoryIndex: 0,
				//分类列表
				categoryList: [],
			}
		},
		onLoad(option) {
			if(option.cateId) {
				this.cateId = option.cateId
			}
			getCategory().then(res => {
				this.categoryList = res.data
				if(this.cateId) {
					this.categoryList.forEach((item,index) => {
						if(this.cateId == item.id) {
							this.showCategoryIndex = index
						}
					})
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					
				})
			},
			//分类切换显示
			showCategory(index) {
				this.showCategoryIndex = index;
			},
			search(){
				uni.navigateTo({
					url: `/mall/pickCardMall/pickCardList?keyword=${this.keyword}`
				})
			},
			toCategory(id) {
				uni.navigateTo({
					url: `/mall/pickCardMall/pickCardList?id=${id}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
	}
	.navBar{
		display: flex;
		justify-content: space-between;
		// #ifdef APP-PLUS
		padding: calc(var(--status-bar-height) + 30rpx) 30rpx 30rpx;
		// #endif
		// #ifdef H5
		padding: 30rpx ;
		// #endif
		background: linear-gradient(90deg, #DFCF93 0%, #F2E9C7 100%);
		.yticon{
			font-size: 36rpx;
			font-weight: bold;
			width: 72rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			margin-right: 20rpx;
		}
		.search {
			position: relative;
			flex: 1;
		
			.searchIcon {
				position: absolute;
				left: 20rpx;
				top: 18rpx;
			}
		
			.searchInp {
				width: 100%;
				height: 72rpx;
				padding-left: 80rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				background: #FAF9F3;
				border-radius: 36rpx;
			}
		}
	}
	

	.category-list {
		position: absolute;
		// #ifdef APP-PLUS
		top: calc(var(--status-bar-height) + 130rpx);
		// #endif
		// #ifdef H5
		top: 130rpx;
		// #endif
		bottom: 0px;
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		background: linear-gradient(90deg, #DFCF93 0%, #F2E9C7 100%);
		display: flex;

		.left {
			width: 230rpx;
			height: calc(100vh - 130rpx);
			background: linear-gradient(90deg, #DFCF93 0%, #E4D6A0 100%);
			.row {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				background: #fff;

				.text {
					background: linear-gradient(90deg, #DFCF93 0%, #E4D6A0 100%);
					width: 100%;
					position: relative;
					line-height: 100rpx;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;
				}

				&.on {
					height: 100upx;
					background: linear-gradient(90deg, #DFCF93 0%, #E4D6A0 100%);

					.text {
						background: #fff;
						border-radius: 20rpx 0 0 20rpx;
						font-size: 30upx;
						font-weight: 600;
						color: #2d2d2d;
					}
				}
				&.front{
					.text{
						border-radius:0 0 20rpx 0;
					}
				}
				&.back{
					.text{
						border-radius:0 20rpx 0 0;
					}
				}
			}
		}

		.right {
			padding: 30rpx 50rpx;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;
			background: #fff;
			width: 520rpx;
			height: calc(100vh - 130rpx);
			&.on{
				border-radius: 0 20rpx 0 0;
			}
			.category {

				.list {
					width: 100%;
					.title{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 26rpx;
					}
					.box{
						display: flex;
						flex-wrap: wrap;
						.boxItem {
							margin:0 30rpx 30rpx 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							flex-wrap: wrap;
						
							.box-img {
								width: 120rpx;
								height: 120rpx;
								border-radius: 8rpx;
							}
						
							.text {
								text-align: center;
								width: 120rpx;
								margin-top: 5upx;
								font-size: 24upx;
							}
						}
						.boxItem:nth-child(3n+0) {
							margin:0 0 30rpx;
						}
					}
				}
			}
		}
	}
</style>
